<template>
	<view class="home">
		<page-content style="height: 100%;" ref="child" :refresher="refresher" @on-refresh="setData" @update="setData"
			@onRefresh="onRefresh" @scrolltolower="fenye" class="page-content">
			<!-- <u-image width="100%" height="316rpx" class="img"
			src="https://yhykt.oss-cn-beijing.aliyuncs.com/2D5D1A7CF6DC427EBB27F02913576ECEbg.png?Expires=4781594278&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=42sxp1l%2BEKDaYXDVb0rYvOvF5eY%3D">
			<u-loading slot="loading"></u-loading>
		</u-image> -->
			<view class="" style="height: 200rpx;background-color: #7484f7;padding-top: 20rpx;">
				<view class="bar">
					<view class="ml50 colorfff">
						{{bjmc|| ''}}
					</view>
				</view>
			</view>
			<view class="banner">
				<view class="task-list box box-pack-between">
					<view class="items box box-tb box-align-center box-pack-center" @click="goKc()">
						<view class="">
							<u-image src="https://yh-sys.oss-cn-beijing.aliyuncs.com/86104D7C62C34302B5EFE63C73C85877icon_kc.png?Expires=4799124292&OSSAccessKeyId=LTAI4GL8SwAiLh3sSPXDS7z9&Signature=Xm9SoI0qKUjWm9ThnoTeKyXxKq4%3D" width="120rpx" height="120rpx">
								<u-loading slot="loading"></u-loading>
							</u-image>
						</view>
						<view class="title">
							课程任务
						</view>
					</view>
					<view class="items box box-tb box-align-center box-pack-center" @click="goSj()">
						<view class="posr">
							<u-image src="https://yh-sys.oss-cn-beijing.aliyuncs.com/19346DB96828447E8E98B8C1503A6ACEicon_sj.png?Expires=4799124039&OSSAccessKeyId=LTAI4GL8SwAiLh3sSPXDS7z9&Signature=p58CuMurcrl8ezegUmj4HravE1k%3D" width="120rpx" height="120rpx">
								<u-loading slot="loading"></u-loading>
							</u-image>
							<view class="tips" v-if="ifPfxz == true && wpyNum != 0">
								劳动成果 +{{wpyNum}}
							</view>
						</view>
						<view class="title">
							实践任务
						</view>
					</view>
				</view>
				<u-gap height="2" bg-color="#F0F1F8"></u-gap>
				<view class="group box box-align-center box-pack-between" @click="goScoreGroup()">
					<view class="box box-align-center" v-if="ifPfxz == true">
						<u-image src="@/static/home/icon_classgroup.png" width="38rpx" height="36rpx">
							<u-loading slot="loading"></u-loading>
						</u-image>
						<view class="ml20">
							评分小组
						</view>
					</view>

					<view class="box box-align-center" v-else>
						<u-image src="@/static/home/icon_classgroup.png" width="38rpx" height="36rpx">
							<u-loading slot="loading"></u-loading>
						</u-image>
						<view class="ml20">
							班级
						</view>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="class-info">
				<view class="tab">
					劳动风采
				</view>
				<view class="class-content mt20" v-if="lists.length !=0">
					<chart-view v-for="(item,index) in lists" :key="item.id" :imgList="item.imgList" :avatar="item.icon"
						:name="item.name" :publishTime="item.createTime" :content="item.content" :isLike="item.isLike"
						:isGiveReward="item.isGiveReward" :likeNumber="item.likeNumber" :item="item"
						:giveRewardNumber="item.giveRewardNumber" :chatNumber="item.plNum" :sourceShow="sourceShow"
						:sourceTitle="item.sourceTitle" :sourceImg="item.sourceImg" :sourceAuthor="item.sourceAuthor"
						:isLikeCnt="item.isLikeCnt" @clickDynamic="clickDynamic(index)" @clickUser="clickUser(item.id)"
						@clickDelete="clickDelete()" @clickThumbsup="clickThumbsup(item.id)" @bjqlist="bjqlist()"
						@clickGiveReward="clickGiveReward(item.id)" @clickChat="clickChat()" @clickFx="clickFx(item)"
						@clickSource="clickSource(id)">
					</chart-view>
					<u-loadmore :status="status" @loadmore="fenye()" />
				</view>
				<no-data title="暂无劳动风采" v-else></no-data>
			</view>
		</page-content>
		<view class="bottom-line"></view>
		<!-- 删除 -->
		<u-action-sheet :list="list" v-model="show" @click="comfirm()"></u-action-sheet>
		<!-- 评论 -->
		<u-popup v-model="pLshow" mode="bottom" height="70%" @close="close">
			<view class="chart-cont">
				<view class="chart-top">
					<view class="chart-cnt">
						{{plNum}}条评论
					</view>
					<u-icon name="close" @click="close"></u-icon>
				</view>
				<view class="chart-bottom" v-if="pinglunlist.length !=0">
					<view class="" v-for="item in pinglunlist" :key="item">
						<view class="user__container" :style="'display: '+userDisplay+';'">
							<view class="user__header-warp">
								<view class="user__header" @click.stop="clickUser()">
									<image class="user__header-image" :src="item.icon" mode="aspectFill"></image>
								</view>
							</view>
							<view class="user__content">
								<view class="user__content-main">
									<text class="user__content-title uni-ellipsis">{{item.name }}</text>
									<text class="user__content-note uni-ellipsis">{{item.pubTime}}</text>
								</view>
							</view>
						</view>
						<view class="texts">{{item.content}}</view>
					</view>
					<!-- <u-loadmore :status="status" @loadmore="fenye()" /> -->
				</view>
				<view class="chart-bottom box box-align-center box-pack-center" v-else>
					暂无评论
				</view>
				<view class="chart-input" :style="'bottom:'+KeyboardHeight+'px;'">
					<textarea v-model="chartText" placeholder="留下你的精彩评论吧" :adjust-position="true"
						@focus="textareaFocus()" />
					<view @click="clickSend()" class="send-btn">发送</view>
				</view>
			</view>
		</u-popup>
		<!-- 分享 -->
		<u-popup v-model="fxShow" mode="bottom" height="300px" border-radius="24" @close="handleClose">
			<u-form :model="form" ref="uForm" :label-width="180" label-align="right">
				<u-form-item label="分享标题">
					<u-input v-model="fxTitle" />
				</u-form-item>
				<u-form-item label="分享图片">
					<u-upload :action="action" :file-list="fileList" :max-count="1" :multiple="false"
						:show-progress="false" @on-uploaded="onuploaded" ref="uUpload">
					</u-upload>
				</u-form-item>
			</u-form>
		
			<view class="box box-align-center box-pack-center fx">
				<view class="box box-align-center">
					<view class="mr10 ml10 box box-tb box-align-center" @click="handleShare()">
						<button open-type="share">
							<u-image width="45px" height="45px"
								src="https://yhykt.oss-cn-beijing.aliyuncs.com/E9B1158464424528B120E668941BC48Cafead635b3db8e9599d7445a2997769.png?Expires=4809034324&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=JNUIIK%2BU73Ee65XW1RniWCQsYX0%3D">
							</u-image>
							<view style="font-size: 14px;">分享到微信</view>
						</button>
					</view>
				</view>
				<!-- <view class="box box-align-center">
					<view class="mr10 ml10 box box-tb box-align-center" @click="handleShareLine()">
						<button>
							<u-image width="45px" height="45px"
								src="https://yhlyy.oss-cn-beijing.aliyuncs.com/5FCA7C3F95DE4F17BE07020E867EE4AEline1.jpg?Expires=4819332051&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=4yWzl9ujV1DoMpG3On8EKu7Eohw%3D">
							</u-image>
							<view style="font-size: 14px;">分享到朋友圈</view>
						</button>
					</view>
				</view> -->
			</view>
		
		</u-popup>
		<u-toast ref="uToast" />
		<u-action-sheet :list="list" v-model="deleteShow" @click="comfirm()"></u-action-sheet>
		<u-modal v-model="showdel" title="确认删除" content="确认删除本条班级动态？" @cancel="handleCancel" @confirm="confirmdel"
			show-cancel-button=true>
		</u-modal>
		<u-mask :show="maskShow" @click="maskShow = false">
			<view class="warp">
				<view class="rect" @tap.stop>点击胶囊按钮分享到朋友圈</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import chartView from './chartView.vue';
	import pageContent from '@/components/pageContent.vue';
	export default {
		components: {
			chartView,
			pageContent
		},
		props: ['bjmc'],
		data() {
			return {
				maskShow:false,
				fxShow: false,
				fxImage: '',
				fxTitle: '',
				fileList: [],
				refresher: true,
				isRefreshing: false, // 是否在刷新中
				infiniteDisabled: false, // 是否禁用上拉加载
				triggered: true,
				user: uni.getStorageSync('user'),
				role: uni.getStorageSync('role'),
				roles: uni.getStorageSync('roles'),
				dclass: uni.getStorageSync('dclass'),
				userRoleList: uni.getStorageSync('userRoleList'),
				wpyNum: 0,
				ifPfxz: false, //是否是评分小组成员
				show: false,
				style: {},
				lists: [],
				pageNum: 1,
				pageSize: 10,
				status: 'loadmore',
				page: {
					pageNum: 1,
					pageSize: 10,
					total: 0,
					pages: 1
				},
				plNum: 0,
				pLshow: false,
				pinglunlist: [],
				chartText: '',
				chartId: '',
				deleteShow: false,
				showdel: false,
				list: [{
					text: '删除'
				}]

			}
		},
		onShow() {},
		//下拉刷新
		// onPullDownRefresh(){
		// 	this.init()
		// },

		// onReachBottom(e) {
		// 	this.fenye()
		// },
		mounted() {

		},
		onRefresh(e) {
			//console.log(e);
			this.$refs.child.refresherComplete()
		},
		methods: {
			clickFx(item) {
				uni.setStorageSync('chat_info', item);
				this.fileList = [];
				//console.log('>>>>>>>>>>1111', this.fileList)
				this.fxShow = true;
				if (item.conts.length != 0) {
					if (item.conts[0].fileSuffix == 'mp4') {
						this.fxImage = item.conts[0].firstFrame;
						// uni.setStorageSync('fxImage', item.conts[0].firstFrame)
					} else {
						this.fxImage = item.conts[0].url;
						// uni.setStorageSync('fxImage', item.conts[0].url)
					}
				} else {
					// uni.setStorageSync('fxImage',
					// 	'https://yhykt.oss-cn-beijing.aliyuncs.com/6B5EEFF0D4134B8F8D4DDCCBD49CF51C11111.png?Expires=4809066847&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=CWwAt7IZtgcT6uzYesjOvsFotPM%3D'
					// 	)
					this.fxImage =
						'https://yhykt.oss-cn-beijing.aliyuncs.com/6B5EEFF0D4134B8F8D4DDCCBD49CF51C11111.png?Expires=4809066847&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=CWwAt7IZtgcT6uzYesjOvsFotPM%3D'
				}
				//console.log(uni.getStorageSync('chat_info'));
				this.fxTitle = item.title
				//存储title 
				uni.setStorageSync('fxTitle', this.fxTitle)
			
				this.fileList.push({url: this.fxImage})
				//console.log('>>>>>', this.fileList);
			},
			setData() {
				this.dclass = uni.getStorageSync('dclass');
				this.bjqlist();
				//console.log(1111)
				//console.log(this.roles)
				//console.log(this.roles.indexOf("header")!= -1 || this.roles.indexOf("member") != -1)
				
				if (this.roles.indexOf("header")!= -1 || this.roles.indexOf("member") != -1) {
					this.getWpyNum();
					this.ifPfxz = true;
				}
			},
			fenye() {
				if (this.page.pageNum >= this.page.pages) return;
				this.status = 'loading';
				this.page.pageSize = this.page.pageSize + 10;
				//console.log(this.page.pageSize);
				this.bjqlist()
			},
			bjqlist() {
				let params = {
					userid: this.user.id,
					classid: this.dclass.id,
					pageNum: this.page.pageNum,
					pageSize: this.page.pageSize
				};
				//console.log('>>bjqlist')
				//console.log(params)
				this.$api.post({
					url: '/ybjq/bjqList',
					method: 'post'
				}, params).then(res => {
					//console.log(res);
					// uni.stopPullDownRefresh();
					this.isRefreshing = false
					this.$refs.child.refresherComplete()
					if (res.code == `0`) {
						this.lists = res.list.list;
						this.page = {
							pageNum: res.list.pageNum,
							pageSize: res.list.pageSize,
							total: res.list.total,
							pages: res.list.pages
						}
						this.status = 'loadmore'
						if (this.page.pageNum >= this.page.pages) {
							this.status = 'nomore'
							this.page.pageSize = 10
						}
					}

				}).catch(error => {
					this.isRefreshing = false
					this.$refs.child.refresherComplete()
				})
			},
			getWpyNum() {
				let opts = {
					url: '/yclassldsjtaskrecords/getWpyNum',
					method: 'post'
				};
				let params = {
					classid: this.dclass.id
				};
				this.$api.post(opts, params).then(res => {
					//console.log(">>>>>>")
					//console.log(res);
					this.wpyNum = res.data;
				})
			},
			goKc() {
				this.$api.post({url:'/yteachplan/chkPlan'},{schoolid:this.user.schoolId}).then(res=>{
					if(res.ispub=='yes'){
						uni.navigateTo({
							url: '/stupageHome/kcView'
						})
					}else{
						this.$refs.uToast.show({
							title: '未发布课程任务！\r\n请耐心等待~',
							type: 'warning',
							duration: '3000'
					    })
				   }
				})				
			},
			goSj() {
				this.$api.post({url:'/yteachplan/chkPlan'},{schoolid:this.user.schoolId}).then(res=>{
					if(res.ispub=='yes'){
						uni.navigateTo({
							url: '/stupageHome/sjView'
						})
					}else{
						this.$refs.uToast.show({
							title: '未发布实践任务！\r\n请耐心等待~',
							type: 'warning',
							duration: '3000'
					    })
					}
				})	
				
			},
			goScoreGroup() {
				if (this.ifPfxz == true) {
					uni.navigateTo({
						url: '/stupageHome/scoreGroup'
					})
				} else {
					uni.navigateTo({
						url: '/stupageHome/classList'
					})
				}

			},
			clickDynamic(e) {
				//console.log('childDynamic');
			},
			// 点击用户信息
			clickUser(e) {
				//console.log(e);
				//console.log('childUser');
			},
			// 点击删除
			clickDelete(e) {
				this.deleteShow = true
				//console.log(e);
				// this.bList = [];
				this.chartId = e
			},
			// 点赞
			clickThumbsup(e) {
				//console.log(e);
				//console.log('childThumbsup');
			},
			// 点击打赏
			clickGiveReward(e) {
				//console.log(e);
				//console.log('clickGiveReward');
			},
			// 点击聊天
			clickChat(e) {
				this.pLshow = true
				this.chartId = e
				//console.log(`>>>${e}`);
				this.$api.post({
					url: '/ybjqpl/pagelist',
					method: 'post'
				}, {
					bjqid: this.chartId
				}).then(res => {
					if (res.code == 0) {
						this.pinglunlist = res.list.list;
						this.plNum = res.list.total
					}
				})
			},
			// 点击原连接
			clickSource(e) {
				//console.log(e);
			},
			comfirm(e) {
				this.showdel = true;
			},
			handleCancel() {},
			confirmdel() {
				//console.log(this.chartId);
				this.$api.post({
					url: '/ybjq/delBjq',
					method: 'post'
				}, {
					id: this.chartId
				}).then(res => {
					//console.log(res)
					if (res.code == "0") {
						this.$refs.uToast.show({
							title: '已删除',
							type: 'success',
							duration: '1500'
						});
						this.bjqlist()
					}
				})
			},
			close() {
				this.pLshow = false
				this.bjqlist()
			},
			textareaFocus() {
				wx.onKeyboardHeightChange(res => {
					//console.log(res);
					uni.showToast({
						title: res
					})
					this.KeyboardHeight = res.height
				})
			},
			clickSend() {
				this.$api.post({
					url: '/comm/chkWords',
					method: 'post'
				}, {
					cont: this.chartText
				}).then(res => {
					if (res.risky == true) {
						this.$refs.uTips.show({
							title: '检测到违规内容，请重新编辑！',
							type: 'warning',
							duration: '2500'
						});
						this.chartText = "";
					}
					if (this.chartText != '') {
						this.$api.post({
							url: '/ybjqpl/add',
							method: 'post'
						}, {
							cont: this.chartText,
							bjqId: this.chartId,
							createUser: this.user.id
						}).then(res => {
							if (res.code == 0) {
								// //console.log({icon:this.user.icon,content:this.chartText,name:this.user.name})
								// this.pinglunlist.unshift({
								// 	icon: this.user.icon,
								// 	content: this.chartText,
								// 	name: this.user.name
								// });
								// this.plNum++;
								this.clickChat(this.chartId)
								this.chartText = "";
							}
						})
					} else {
						this.$refs.uToast.show({
							title: '评论不能为空',
							type: 'info'
						})
					}
				})
			},
			handleShare() {
				uni.setStorageSync('fxTitle', this.fxTitle);
				uni.setStorageSync('fxImage', this.fxImage)
				let files = [];
				files = this.$refs.uUpload.lists;
				//console.log(files)
			},
			handleShareLine() {
				uni.setStorageSync('fxTitle', this.fxTitle);
				uni.setStorageSync('fxImage', this.fxImage)
				let files = [];
				files = this.$refs.uUpload.lists;
				//console.log(files)
				this.fxShow = false
				this.maskShow = true
			},
			handleClose(){
				this.$refs.uUpload.clear();
				//console.log("123");
			},
		}
	}
</script>

<style scoped lang="scss">
	.home {
		position: relative;
		// margin-top: -188rpx;
		width: 100%;
		height: 100%;

		.banner {
			box-sizing: border-box;
			z-index: 100000;
			padding: 40rpx;
			margin: -126rpx auto 30rpx;
			width: 690rpx;
			height: 412rpx;
			border-radius: 20rpx;
			// background-color: rgba(255,255,255,.6);
			background: url(https://yh-sys.oss-cn-beijing.aliyuncs.com/091112224FF3469FA55C6A5496B1F69Aicon_banner%402x.png?Expires=4799124736&OSSAccessKeyId=LTAI4GL8SwAiLh3sSPXDS7z9&Signature=nW6OkqwzxRY0BItOkIfTLwzCs%2Bg%3D) no-repeat;
			background-size: 100% 100%;

			.task-list {
				margin-bottom: 30rpx;
				height: 247rpx;

				.items {
					flex: 1;

					.press {
						width: 85%;
					}

					.sliders {
						width: 65%;
					}

					.title {
						margin: 20rpx 0;
						font-size: 30rpx;
						color: #2F3142;
						font-weight: 500;
					}

					.posr {
						position: relative;

						.tips {
							position: absolute;
							top: 0;
							right: -110rpx;
							width: 140rpx;
							height: 40rpx;
							line-height: 40rpx;
							background: #FF5A77;
							border-radius: 26rpx;
							font-size: 20rpx;
							text-align: center;
							color: #fff;
						}
					}
				}
			}

			.group {
				height: 89rpx;
			}

		}

		.class-info {
			width: 100%;
			background-color: #fff;
			padding: 30rpx;
			min-height: calc(100% - 520rpx);
			height: auto;

			.tab {
				text-align: center;
				width: 130rpx;
				height: 40rpx;
				font-weight: 600;

				// border-bottom: 4rpx solid #7C79F5;
				// border-bottom-width: 5rpx;
				&:after {
					content: '';
					width: auto;
					width: 35rpx;
					height: 6rpx;
					background: #7C79F5;
					border-radius: 4px;
					display: block;
					margin: 0 auto;
					margin-top: 6rpx;
					z-index: 111111;
				}
			}
		}

	}

	.bar {
		display: flex;
		align-items: center;
		padding-left: 50rpx;
	}

	.ml50 {
		margin-left: 20rpx;
	}


	.chart-cont {
		position: relative;
	}

	.chart-top {
		position: fixed;
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #fff;
		z-index: 100;
		/* border-bottom: 2rpx solid #C0C0C0; */
	}

	.chart-cnt {
		width: 680rpx;
		text-align: center;
	}

	.chart-bottom {
		padding: 100rpx 0 120rpx;
	}

	.chart-input {
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-top: 2rpx solid #C0C0C0;
	}

	.chart-input textarea {
		box-sizing: border-box;
		padding: 43rpx 0 0 20rpx;
		width: 560rpx;
		height: 100%;
	}

	.send-btn {
		width: 100rpx;
		height: 120upx;
		line-height: 120upx;
		margin-left: 16upx;
	}

	.user__container {
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		/* -webkit-flex-direction: row; */
		flex-direction: row;
		-webkit-box-flex: 1;
		/* -webkit-flex: 1; */
		flex: 1;
		padding: 14upx 18upx;
		position: relative;
		overflow: hidden;
	}

	.user__header {
		display: flex;
		width: 80upx;
		height: 80upx;
		-webkit-border-radius: 80upx;
		border-color: #eee;
		border-width: 1upx;
		border-style: solid;
		overflow: hidden;
		border-radius: 80upx;
	}

	.user__header-image {
		display: flex;
		align-content: center;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		flex-direction: row;
		-webkit-box-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		align-items: center;
		flex-wrap: wrap-reverse;
		width: 80upx;
		height: 80upx;
		border-radius: 80upx;
		border-color: #eee;
		border-width: 1upx;
		border-style: solid;
		overflow: hidden;
	}

	.user__content {
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		flex-direction: row;
		-webkit-box-flex: 1;
		flex: 1;
		overflow: hidden;
		padding: 4upx 0;
	}

	.user__content-main {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		padding-left: 14upx;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		overflow: hidden;
	}

	.user__content-note {
		margin-top: 3px;
		color: #999;
		font-size: 24upx;
		font-weight: normal;
		overflow: hidden;
	}

	.texts {
		padding-left: 11%;
		margin: 1% 3% 2%;
	}
	.fx button {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #fff;
	}
	
	/deep/ .fx button::after {
		border: none;
	}
	
	.warp {
			display: flex;
			align-items: start;
			justify-content: center;
			height: 100%;
		}
	
		.rect {
			margin-top: 150px;
			width: 120px;
			height: 120px;
			color: #fff;
		}
</style>
